<template>
  <div class="family">
    <header>
      <a @click="back">
        <van-icon name="arrow-left" size="0.32rem" color="#999999"/>
      </a>
      <img src="/img/Ke_img/形状3.png" alt="" class="search">
      <input type="text" placeholder="输入搜索内容">
      <button>搜索</button>
    </header>
    <van-tabs v-model="active">
        <van-tab title="家庭婚姻" class="homelist">
            <a v-for="(item,index) in homelabel" :key="index">{{item}}</a>
        </van-tab>
        <van-tab title="地区">
            <van-tree-select
            height="55vw"
            :items="items"
            />
            <!-- :main-active-index.sync="activeIndex" -->
        </van-tab>
        <van-tab title="排序">内容 3</van-tab>
        <van-tab title="筛选" class="sxlist">
            <h3>服务类型</h3>
            <van-button class="btn" type="default" v-for="(item,index) in zixunlabel1"
             :key="index">{{item}}</van-button>
             <h3>服务类型</h3>
            <van-button class="btn" type="default" v-for="(item,index) in zixunlabel2"
             :key="index">{{item}}</van-button>
        </van-tab>
    </van-tabs>
    <div class="hotlawyer">
        <a class="listnews" v-for="(item,index) in list" :key="index" @click="goLawyer(item.id)" >
            <img :src="item.url" alt="">
            <div class="list">
                <h3>{{item.name}}</h3>
                <p>{{item.lawOffice}}</p>
                <span>￥{{item.likenumInt}}</span><b><i>{{item.servePeopleNumber}}</i>人咨询</b>
            </div>
            <a class="talk"><img src="/img/Ke_img/私聊.png" alt=""></a>
        </a>
    </div>
  </div>
</template>

<script>
import { mapActions,mapState } from "vuex";
export default {
    data() {
        return {
        active: 0,
        homelabel:["全部","离婚","夫妻财产/债","抚养","彩礼","家暴","婚前财务争议","赡养","继承","收养"],
       /*  activeIndex:[items[0]], */
        items: [
          { text: '浙江', children: ["杭州","温州","宁波","义乌"], dot: true },
          { text: '江苏', children: ["南京","无锡","徐州","苏州"], badge: 5 },
        ],
        zixunlabel1:["所有","在线咨询","电话咨询","交通事故","诉讼委托"],
        zixunlabel2:["所有","男律师","女律师"],
        lawyerlist:[
                {id:"",url:"",name:"张三",company:"啥啥啥律师会所",price:"68",peopleNum:"1342"},
                {id:"",url:"",name:"李四",company:"哈哈哈律师会所",price:"99",peopleNum:"1442"},
            ]
        }
    },
    computed:{
        ...mapState("ke",['list'])
    },
   methods: {
    ...mapActions("ke",['init']),
      back() {
        // 返回
        this.$router.push("/home/index")
      },
      goLawyer(id){
        console.log(111);
        this.$router.push("/home/index/lawyer")
      }
    },
    mounted() {
        this.init()
    },
}
</script>

<style scoped>
.family{
    display: flex;
   flex-direction: column;
}
header{
    height: .7rem;
    line-height: .7rem;
   width: 100%;
   margin-right: 0;
   display: flex;
   position: relative;
   background-color: #EFEFEF;
}
header input{
   width: 5.54rem;
   height: 0.62rem;
   padding-left:.61rem;
   font-size: .24rem;
   font-family: PingFang SC;
   font-weight: 400;
   color: #999999;
   margin-left: .15rem;
}
header img{
   width: 0.17rem;
   height: 0.17rem;
}
header .search{
   position: absolute;
   width:0.29rem;
   height: 0.29rem;
   left: .8rem;
   top: 0.23rem;
}
header button{
    border: none;
    font-size: 0.28rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    margin-left: .1rem;
}
/* 家庭婚姻列表*/
.homelist{
    display: flex;
    flex-wrap: wrap;
}
.homelist a{
    margin:.1rem .5rem .1rem .2rem;
    padding: 0 .2rem;
    border: 1px solid;
    border-radius: 10%;
    background-color: #EFEFEF;
    font-size: .25rem;
}
/* 筛选列表 */
.sxlist h3{
  font-size: .32rem;
}
.sxlist .btn{
  margin:.1rem;
}
/* 律师展示 */
/* 精选律师 */
.hotlawyer{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    position: fixed;
    top:3.5rem;
    left:0rem;
}
.hotlawyer .listnews{
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 2.0rem;
    border-bottom: 1px solid;
    padding:0 .4rem;
}
.hotlawyer .listnews img{
    width:1.8rem;
    height: 1.8rem;
    margin-top: .1rem;
}
.hotlawyer .listnews .list{
    flex: 1;
    margin-left: .2rem;
    margin-top: .4rem;
}
.hotlawyer .listnews .list h3{
    font-size: .28rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
}
.hotlawyer .listnews .list p{
    font-size: .22rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #666666;
}
.hotlawyer .listnews .list span{
    font-size: .26rem;
    font-family: PingFang SC;
    font-weight: 600;
    color: #CD2121;
}
.hotlawyer .listnews .list b{
    font-size:.2rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #666666;
    margin-left: .5rem;
}
.hotlawyer .listnews .list i{
    font-style:normal;
}
.hotlawyer .talk{
    height: .59rem;
    width: 1.13rem;
    margin-top: .7rem;
}
.hotlawyer .talk img{
    height: .59rem;
    width: 1.13rem;
}
/* 选项内容阴影 */
::v-deep .van-tabs__content{
  z-index: 1;
  background-color: white;
}
</style>